<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="./1.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .right-box {
            width: 500px;
            height: 500px;
            margin: auto;
            margin-top: 100px;
            background-color: #fff;
        }

        .right-box div:nth-child(1) {
            width: 100%;
            height: 400px;
            /* background-color: aqua; */
        }

        .right-box div:nth-child(2) {
            width: 100%;
            height: 100px;
            border-top: 1px solid #c1c1c1;
        }

        .right-box div:nth-child(2) button {
            display: block;
            /* outline: auto; */
            width: 100%;
            height: 100%;
            font-size: 30px;
            font-weight: 900;
        }

        .text {
            text-align: center;
            color: red;
            font-size: 40px;
            font-weight: 900;
            line-height: 400px;
        }
        .tablex{
            width: 500px;
            position: absolute;
            top: 0;
            background-color: #fff;
        }
        .tablex table{
            width: 100%;
        }
        .tablex table th{
            padding: 10px;
            line-height: 30px;
        }
        /* .tablex table tr{
            line-height: 30px;
        } */
        .tablex table tr td{
            padding: 10px;
            line-height: 30px;
        }
        /* .tablex table  */
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="content-box">
                <div class="content-box-herad">点名</div>
                <div class="content-box-st">
                    <div class="content-box-st-left" style="overflow: hidden;">
                        <el-menu default-active="2" class="el-menu-vertical-demo" @select="handleOpen"
                            background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-location"></i>
                                    <span><a href="./index.html">量化分计算</a></span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item v-for="item in array" :key="item.id"
                                        :index="item">第{{item}}组</el-menu-item>
                                </el-menu-item-group>

                            </el-submenu>
                            <el-menu-item index="2">
                                <i class="el-icon-menu"></i>
                                <span slot="title">随机点名</span>
                            </el-menu-item>
                            <el-menu-item index="3">
                                <i class="el-icon-menu"></i>
                                <span slot="title">导航三</span>
                            </el-menu-item>
                            <el-menu-item index="4">
                                <i class="el-icon-menu"></i>
                                <span slot="title">导航四</span>
                            </el-menu-item>
                        </el-menu>
                    </div>
                    <div class="content-boxlst-right" style="position: relative;">
                        <!-- 点名 -->
                        <div class="right-box">
                            <div ref="text" class="text">.</div>
                            <div><button v-on:click="callthfun" ref="call">点名开始</button></div>
                        </div>
                        <!-- 点名记录 -->
                        <!-- <el-table :data="recorddata" style="width: 100%" type=index>
                            <el-table-column prop="date" label="日期" width="180">
                            </el-table-column>
                            <el-table-column prop="name" label="姓名" width="180">
                            </el-table-column>
                            <el-table-column label="回答状况" prop="name" >
                               正确: &nbsp;<input type="radio" name="index" value="正确">&nbsp;
                               错误: &nbsp;<input type="radio" name="index" value="错误">
                            </el-table-column>
                        </el-table> -->
                       <div class="tablex" v-if="recorddata.length>0">
                        <table border="1" cellspacing="0" cellpadding="0">
                            <tbody>
                                <tr>
                                    <th>日期</th>
                                    <th>姓名</th>
                                    <th>回答状况</th>
                                </tr>
                                <tr v-for="value in recorddata" :key="value.id">
                                    <td>{{value.date}}</td>
                                    <td>{{value.name}}</td>
                                    <td>  
                                        正确: &nbsp;<input type="radio" :name="value.name" value="正确">&nbsp;
                                        错误: &nbsp;<input type="radio" :name="value.name" value="错误"></td>
                                </tr>
                            </tbody>
                        </table>
                       </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                // 定时器
                setInt: "",
                //  标记
                setindex: 0,
                // 回答状况
                recorddata:[]
            }
        },
        methods: {
            callthfun() {
                var get = JSON.parse(localStorage.getItem('shuju'))
                if (this.setindex == 0) {
                    this.$refs.call.innerText = "点击暂停"
                    this.setInt = setInterval(() => {
                        // 先随机到组
                        var objname = Object.keys(get)[Math.floor(Math.random() * Object.keys(get).length)]
                        //  再随机到人
                        var objnamedata = get[objname][Math.floor(Math.random() * get[objname].length)];
                        this.$refs.text.innerText = objnamedata.name
                    }, 50);
                    this.setindex = 1
                } else {
                    clearInterval(this.setInt)
                    var map=new Date;
                    var mapx=map.getFullYear()+'-'+Number(map.getMonth()+1)+'-'+map.getDate()+'-'+String(map).split(" ")[4];
                    console.log(mapx)
                    this.setindex = 0
                    var objrecord={}
                    objrecord.date=mapx;
                    objrecord.name=this.$refs.text.innerText;
                    this.recorddata.push(objrecord)
                    this.$refs.call.innerText = "点击开始"
                }


            }
        },
        mounted: function () {
        }

    })
</script>

</html>